// SPDX-License-Identifier: MIT
@use "color-palette" as palette;

.contrast-checker {

  -fx-background-color: -color-contrast-checker-bg;
  -fx-hgap: 40px;
  -fx-vgap: 20px;
  -fx-padding: 20px;

  .label {
    -fx-text-fill: -color-contrast-checker-fg;
  }

  .text-field {
    -color-input-bg:             transparent;
    -color-input-fg:             -color-contrast-checker-fg;
    -color-input-border:         transparent;
    -color-input-bg-focused:     transparent;
    -color-input-border-focused: transparent;

    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-border-color: -color-contrast-checker-fg;
    -fx-border-width: 0 0 1 0;
  }

  .button {
    -color-button-bg: transparent;
    -color-button-fg: -color-contrast-checker-fg;
    -color-button-border: transparent;

    -color-button-bg-hover: transparent;
    -color-button-fg-hover: -color-contrast-checker-fg;
    -color-button-border-hover: transparent;

    -color-button-bg-focused: transparent;
    -color-button-fg-focused: -color-contrast-checker-fg;
    -color-button-border-focused: transparent;

    -color-button-bg-pressed: transparent;
    -color-button-fg-pressed: -color-contrast-checker-fg;
    -color-button-border-pressed: transparent;

    -fx-border-width: 1px;
    -fx-border-color: -color-contrast-checker-fg;
    -fx-border-radius: 4px;

    &:armed,
    &:focused:armed {
      -fx-border-color: transparent;
    }
  }

  .slider {
    >.thumb {
      -color-slider-thumb: -color-contrast-checker-fg;
      -color-slider-thumb-border: -color-contrast-checker-fg;
    }

    >.track {
      -color-slider-track: -color-contrast-checker-fg;
      -fx-opacity: 0.5;
    }
  }

  .ikonli-font-icon {
    -fx-icon-color: -color-contrast-checker-fg;
    -fx-fill: -color-contrast-checker-fg;
  }

  .contrast-ratio {
    -fx-padding: 0 40px 0 0;

    >.large-font {
      -fx-font-size: 4em;
    }

    >.ratio {
      -fx-font-size: 2em;
    }
  }

  .contrast-level {
    >.state {
      -fx-padding: 0.5em 1em 0.5em 1em;
      -fx-background-color: palette.$color-wcag-bg-failed;
      -fx-background-radius: 4px;
      -fx-text-fill: palette.$color-wcag-fg;

      &:passed {
        -fx-background-color: palette.$color-wcag-bg-passed;
      }

      >.ikonli-font-icon {
        -fx-fill: palette.$color-wcag-fg;
        -fx-icon-color: palette.$color-wcag-fg;
      }
    }
  }

  .context-menu {
    -fx-background-color: -color-border-muted, -color-bg-default;

    >.label {
      -fx-text-fill: -color-fg-default;
    }
  }
}

.contrast-checker-dialog {
  -color-dialog-bg: white;
  -color-dialog-fg: black;

  >.header {
    -fx-background-color: -color-dialog-bg;

    >.title {
      -fx-text-fill: -color-dialog-fg;
    }

    >.close-button {
      -color-button-fg: -color-dialog-fg;
      -color-button-bg-hover: derive(-color-dialog-bg, 10%);
    }
  }

  -fx-border-color: -color-dialog-bg;
}